<template>
  <div class="table">
    <el-row
      v-if="layout.length !== 0"
      style="margin:0 5px 10px 0"
      :gutter="10"
      justify="space-between"
    >
      <el-col :span="8">
        <el-button
          v-if="layout.indexOf('addBtn') !== -1"
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
        >新增</el-button>
        <el-button
          v-if="layout.indexOf('exportBtn') !== -1"
          type="warning"
          plain
          icon="el-icon-upload2"
          size="small"
          @click="handleExport"
        >导出</el-button>
        <el-button
          v-if="layout.indexOf('importBtn') !== -1"
          type="info"
          plain
          icon="el-icon-download"
          size="small"
          @click="handleImport"
        >导入</el-button>
      </el-col>
      <el-col :span="11">
        <el-row justify="space-around">
          <el-col :span="13">
            <slot name="extractbtn"></slot>
          </el-col>
          <el-col :span="9">
            <el-input
              style="float: right"
              :placeholder="pageInfo.placeholder"
              clearable
              size="small"
              v-model="searchText"
              @clear="clearInput"
            >
              <template #append>
                <el-button size="small" @click="search">
                  <el-icon class="el-input__icon">
                    <search />
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-popover placement="bottom-end" width="150" trigger="hover" @show="showPopover">
              <el-checkbox-group v-model="colSelected" :min="1">
                <el-checkbox
                  v-for="(item, index) in colOptions"
                  :label="item"
                  :key="item"
                  @change="changeColumn($event, index)"
                />
              </el-checkbox-group>
              <template #reference>
                <el-button size="small" icon="el-icon-s-operation" />
              </template>
            </el-popover>
          </el-col>
        </el-row>
        <!-- <slot name="extractbtn"></slot> -->
        <!-- <el-row :gutter="10">
          <el-col :span="19" v-if="layout.indexOf('search') !== -1">
            <el-input
              style="float: right"
              :placeholder="pageInfo.placeholder"
              clearable
              size="small"
              v-model="searchText"
              @clear="clearInput"
            >
              <template #append>
                <el-button size="small" @click="search">
                  <el-icon class="el-input__icon">
                    <search />
                  </el-icon>
                </el-button>
              </template>
            </el-input>
          </el-col>
          <el-col :span="2" v-if="layout.indexOf('column') !== -1">
            下拉菜单 选择要显示的表头内容
            <el-popover placement="bottom-end" width="150" trigger="hover" @show="showPopover">
              <el-checkbox-group v-model="colSelected" :min="1">
                <el-checkbox
                  v-for="(item, index) in colOptions"
                  :label="item"
                  :key="item"
                  @change="changeColumn($event, index)"
                />
              </el-checkbox-group>
              <template #reference>
                <el-button size="small" icon="el-icon-s-operation" />
              </template>
            </el-popover>
          </el-col>
        </el-row>-->
      </el-col>
    </el-row>
    <el-table
      ref="theTable"
      @selection-change="handleSelectionChange"
      @selection-all="handleSelectionAll"
      :data="data"
      :size="size"
      :highlight-current-row="true"
      :header-cell-style="{
        color: '#666',
        'text-align': 'center',
        'font-weight': 'bold',
      }"
      :style="{ marginBottom: mbottom + 'px' }"
      :cell-style="{ 'text-align': 'center' }"
      empty-text="暂无数据"
    >
      <!-- 序号显示 -->

      <el-table-column v-if="selectColumns" type="selection" width="55" />
      <el-table-column
        v-if="orderColumns.show"
        label="序号"
        align="center"
        type="index"
        :width="orderColumns.width"
      ></el-table-column>
      <slot />
    </el-table>
    <!-- <el-pagination></el-pagination> -->

    <!-- 分页区域 -->
    <el-pagination
      key="theTableElPagination"
      v-if="pageInfo.isShow"
      v-model:currentPage="pageInfo.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import type { ElTable } from "element-plus";

export default defineComponent({
  props: {
    //   表格数据
    data: {
      type: Array,
      default: [],
      required: true,
    },
    // 表格大小 large/default/small
    size: {
      type: String,
      default: "default",
    },
    // 序列号栏
    orderColumns: {
      type: Object,
      default: {
        show: true,
        width: 50,
      },
    },
    // 选择框栏
    selectColumns: {
      type: Boolean,
      default: false,
    },
    // 表格顶部外边距
    mbottom: {
      type: Number,
      default: 10,
    },
    // 分页数据
    pageInfo: {
      type: Object,
      default: {
        isShow: true,
        pageSize: 5,
        pageNum: 1,
        placeholder: "请输入内容",
      },
      required: true,
    },
    // 表格总数量
    total: {
      type: Number,
      required: true,
    },
    // 显示隐藏表格栏数组，数组里面是对象，对象有两个值，一个是show，一个是name
    columns: {
      type: Array,
      default: [],
    },
    layout: {
      // 值 ["addBtn", "exportBtn", "search", "column"],
      type: Array,
      default: [],
    },
  },
  setup(props, ctx) {
    const theTable = ref<InstanceType<typeof ElTable>>();
    const state = reactive({
      colOptions: [],
      colSelected: [],
      columnChange: false,
      searchText: "",
    });
    // 展示表格兰名称
    // 列的显示隐藏
    function showPopover() {
      if (!state.columnChange) {
        props.columns.map((item) => {
          // console.log(item.name)
          state.colOptions.push(item.name);
        });
        state.colSelected = props.columns.map((item) => {
          console.log(item);
          if (item.show) {
            return item.name;
          }
        });
        console.log(state.colSelected);
        state.columnChange = true;
      }
    }

    // 选择列
    function changeColumn(show, index) {
      let columns = props.columns;
      columns.map((item, i) => {
        if (index === i) {
          item.show = show;
        }
      });
      // 调用父组件方法 并传递columns 父组件要有一个方法changeColumn来接收
      ctx.emit("changeColumn", columns);
    }
    // 输入框清空
    function clearInput() {
      ctx.emit("clearInput");
    }

    function search() {
      ctx.emit("search", state.searchText);
    }

    // 选择框选项改变
    function handleSelectionChange(val) {
      console.log(val);
      console.log(theTable);
    }
    // 选择框全选
    function handleSelectionAll(val) {
      console.log(val);
    }
    // 页面大小改变
    function handleSizeChange(newSize: number) {
      ctx.emit("pageInfoChange", "size", newSize);
    }
    // 当前页码改变
    function handleCurrentChange(newPage: number) {
      ctx.emit("pageInfoChange", "page", newPage);
    }
    // 触发添加按钮
    function handleAdd() {
      ctx.emit("handleAdd");
    }
    // 触发导出按钮
    function handleExport() {
      ctx.emit("handleExport");
    }
    // 触发导入按钮
    function handleImport() {
      ctx.emit("handleImport");
    }
    return {
      ...toRefs(state),
      theTable,
      handleAdd,
      handleExport,
      clearInput,
      search,
      handleSelectionChange,
      handleSelectionAll,
      handleSizeChange,
      handleCurrentChange,
      showPopover,
      changeColumn,
      handleImport,
    };
  },
});
</script>

<style lang="scss">
.table {
  background-color: #fff;
  padding: 10px;
}
</style>
